<template>
  <div id="app">
	<div id="headline">
		<p style="font-size: 8px;color: #ffffff;margin-left: 8px;margin-top: 8px;">你好，欢迎来到软特来福！</p>
		<p style="font-size: 7px;color: #ffffff;margin-left: 5px;margin-top: 7.5px;">服务热线：021-2807-0999</p>
		<div id="nav">
			<div class="divs" style="width: 30px;">
				<router-link to="/"  replace  class="router-link-exact-active router-link-active" >首页</router-link> 	
			</div>
			<div class="divs" style="width: 30px;">
				<router-link to="/News" replace class="router-link-exact-active router-link-active" >消息</router-link> 
			</div>
			<div class="divs" style="width: 30px;">
				<router-link to="/BaskThings" replace class="router-link-exact-active router-link-active" >晒物</router-link> 
			</div>
			<div class="divs" style="width: 30px;">
				<router-link to="/Trends" replace class="router-link-exact-active router-link-active">动态</router-link> 
			</div>
			<div class="divs" style="width: 50px;">
				<router-link to="/SportsRecommendations" replace class="router-link-exact-active router-link-active">运动建议</router-link>
			</div>
			<div class="divs" style="width: 50px;">
				<router-link to="/PersonalCenter" replace class="router-link-exact-active router-link-active">个人中心</router-link>
			</div>
		</div>
		
	</div>
	
	<router-view></router-view>
  </div>
</template>

<script>

</script>


<style>
#headline{
	display: flex;
	flex-direction: row;
	width: 100%;
	height: 34px; 
	background-color: rgba(0, 0, 0, 1);
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
#nav{
	width: 220px;
	display: flex;
	flex-direction: row;
	float: right;
	margin-right: 0px;

}
.router-link-active{
	font-size: 10px;
	text-decoration: none;
	color: #fff;
}
.divs{
	margin-top: 5px;
	text-align: center;
	float: right;
}
</style>
